import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { renderTags } from '#/utils/render';

export const querySchema: FormSchemaGetter = () => [
  {
    component: 'Input',
    fieldName: 'userName',
    label: '登录账号',
    hideLabel: true,
    componentProps: {
      placeholder: '请输入登录账号',
    },
  },
  {
    component: 'Input',
    fieldName: 'nickName',
    label: '用户姓名',
    hideLabel: true,
    componentProps: {
      placeholder: '请输入用户姓名',
    },
  },
  {
    component: 'Input',
    fieldName: 'phonenumber',
    label: '手机号码',
    hideLabel: true,
    componentProps: {
      placeholder: '请输入手机号码',
    },
  },
];

export const columns: VxeGridProps['columns'] = [
  {
    align: 'center',
    type: 'checkbox',
    resizable: false,
    width: 45,
  },
  {
    title: '授权用户信息',
    field: 'deptName',
    minWidth: 400,
    slots: {
      default: ({ row }) => {
        return renderTags(
          [
            { tagName: row.userName || '无账号', tagColor: 'purple' },
            { tagName: row.nickName || '无昵称', tagColor: 'error' },
            { tagName: row.phonenumber || '暂无手机号', tagColor: 'blue' },
            { tagName: row.email || '暂无手机号', tagColor: 'orange' },
            { tagName: row.deptName || '未分配部门', tagColor: 'processing' },
          ],
          false,
          5,
        );
      },
    },
  },
  // {
  //   title: '登录账号',
  //   field: 'userName',
  // },
  // {
  //   title: '用户姓名',
  //   field: 'nickName',
  // },
  // {
  //   title: '手机号码',
  //   field: 'phonenumber',
  // },
  // {
  //   title: '电子邮箱',
  //   field: 'email',
  // },
  {
    field: 'action',
    fixed: 'right',
    align: 'center',
    slots: { default: 'action' },
    title: '操作',
    resizable: false,
    width: 'auto',
  },
];
